<template>
    <div class="paymentDetails">
         <header>
            <navigator open-type="navigateBack" delta="1">
                <van-icon name="arrow-left" color="#fff" size="18"/>
            </navigator>
            <h3>支付明细</h3>
            <p></p>
        </header>
        <main>
            <div>
                <p>2021年1月 </p>
                <p>支出 ¥1917.61</p>
            </div>
            <div class="wx_payment">
                <div>
                    <img src="../../static/微信支付.png" alt="">
                    <div>
                        <p class="wx_find">微信支付 宏烨找房 <span>-10.00</span></p>
                        <p>1月11日 12:16</p>
                    </div>
                </div>
                <div>
                    <img src="../../static/微信支付.png" alt="">
                    <div>
                        <p class="wx_find"><span>微信支付 宏烨找房</span> <span>-10.00</span></p>
                        <p>1月11日 12:16</p>
                    </div>
                </div>
            </div>
        </main>
    </div>
</template>

<script>
export default {

}
</script>

<style  scoped>
.paymentDetails{
    width: 100%;
    font-size: 30rpx;
}
/* 头部 */
header{
    width: 100%;
    height: 150rpx;
    position: absolute;
    left: 0px;
    top: 0px;
    background: -webkit-linear-gradient( 315deg, rgba(2, 114, 240, 1) 0%, rgba(2, 114, 240, 1) 0%, rgba(57, 165, 255, 1) 100%, rgba(57, 165, 255, 1) 100%);
    position: relative;
    display: flex;
    align-content: center;
    justify-content: space-around;
    top:0;
    position:sticky;
}
header>navigator{
    margin-top:70rpx;
}
h3{
    padding-top: 70rpx;
    text-align: center;
    color: #fff;
    font-size: 35rpx;
}

main{
    width: 100%;
}
main>div:first-child{
    width: 100%;
    height: 150rpx;
    background: #F6F6F6;
    padding: 20rpx 50rpx;
}
main>div:first-child>p:first-child{
    font-size: 40rpx;
    font-weight: bold;
}
main>div:first-child>p{
    line-height: 70rpx;
}

.wx_payment>div{
    display: flex;
    align-content: center;
    padding: 50rpx 0 0 50rpx;
}
.wx_payment>div img{
    width: 100rpx;
    height: 100rpx;
}
.wx_payment>div>div{
    margin: 10rpx 20rpx;
}
.wx_payment>div>div>p:first-child{
    font-weight: bold;
    font-size: 34rpx;
}
.wx_find span:last-child{
    margin-left: 150rpx;
}

</style>
